From 691b6b88ead6abfe8d675e42bc24c07a7df9a579 Mon Sep 17 00:00:00 2001 From: Matthias Clasen Date: Sat, 16 Jan 2021 12:38:24 -0500 Subject: [PATCH] inspector: Add a legend for the layout overlay Colors are more useful if you know what they represent. --- gtk/inspector/inspector.css | 24 ++++++++ gtk/inspector/visual.ui | 112 ++++++++++++++++++++++++++++++++++-- 2 files changed, 130 insertions(+), 6 deletions(-) diff --git a/gtk/inspector/inspector.css b/gtk/inspector/inspector.css index 151cbb92ca..ba14df0ed3 100644 --- a/gtk/inspector/inspector.css +++ b/gtk/inspector/inspector.css @@ -59,3 +59,27 @@ picture.dark { picture.light { background: white; } + +#css-padding-color { + background-color: rgba(70%, 0%, 70%, 0.6); + min-width: 10px; + min-height: 10px; +} + +#css-border-color { + background-color: rgba(0, 0, 0, 0.0); + min-width: 10px; + min-height: 10px; +} + +#css-margin-color { + background-color: rgba(70%, 70%, 0%, 0.6); + min-width: 10px; + min-height: 10px; +} + +#widget-margin-color { + background-color: rgba(70%, 0%, 0%, 0.6); + min-width: 10px; + min-height: 10px; +} diff --git a/gtk/inspector/visual.ui b/gtk/inspector/visual.ui index fc221b8fd1..f919cf541e 100644 --- a/gtk/inspector/visual.ui +++ b/gtk/inspector/visual.ui @@ -480,11 +480,111 @@ 40 - - Show Layout Borders - start - baseline - 0.0 + + 6 + + + Show Layout Borders + start + baseline + 0.0 + + + + + dialog-question-symbolic + + + + + 10 + 10 + 10 + 10 + 4 + 4 + + + css-padding-color + + 0 + 0 + + + + + + css-border-color + + 0 + 1 + + + + + + css-margin-color + + 0 + 2 + + + + + + widget-margin-color + + 0 + 3 + + + + + + CSS Padding + 0 + + 1 + 0 + + + + + + CSS Border + 0 + + 1 + 1 + + + + + + CSS Margin + 0 + + 1 + 2 + + + + + + Widget Margin + 0 + + 1 + 3 + + + + + + + + + @@ -612,7 +712,7 @@ - + -- 2.30.2